// 轮播图组件
Vue.component('slide-banner', {
	template: `
        <div class="slide-banner-container">
            <ul class="slide" v-if="banners && banners.length > 0">
                <li v-for="(banner, index) in banners" :key="banner.id" :style="{opacity: index === currentIndex ? 1 : 0, display: index === currentIndex ? 'block' : 'none'}">
                    <a :href="banner.url || '#'"><img :src="getImageUrl(banner.image)" :alt="banner.name || '轮播图'" @error="handleImageError"></a>
                </li>
            </ul>
            <div class="prev" @click="prevSlide" v-if="banners && banners.length > 0"></div>
            <div class="next" @click="nextSlide" v-if="banners && banners.length > 0"></div>
            <ul class="points" v-if="banners && banners.length > 0">
                <li v-for="(banner, index) in banners" :key="banner.id" 
                    :class="{ active: index === currentIndex }"
                    @click="setCurrentIndex(index)"></li>
            </ul>
            <div v-if="!banners || banners.length === 0" class="no-banners">
                <p>暂无轮播图数据</p>
            </div>
        </div>
    `,
	data() {
		return {
			currentIndex: 0,
			timer: null
		};
	},
	props: {
		banners: {
			type: Array,
			required: true
		}
	},
	mounted() {
		this.startTimer();
		// 确保DOM元素存在后再添加事件监听
		this.$nextTick(() => {
			if (this.$el && this.$el.addEventListener) {
				this.$el.addEventListener('mouseenter', this.stopTimer);
				this.$el.addEventListener('mouseleave', this.startTimer);
			}
		});
	},
	watch: {
		banners: {
			handler() {
				// 当banners数据更新时，重新处理图片
				this.$nextTick(() => {
					// 确保this.$el存在
					if (!this.$el) return;

					const images = this.$el.querySelectorAll('img');
					images.forEach(img => {
						const src = img.getAttribute('src');
						// 如果是FastDFS路径，添加FastDFS服务器前缀
						if (src && src.startsWith('/group1/')) {
							img.setAttribute('src', (window.FDFS_BASE_URL || 'http://image.meiduo.site:8888') + src);
						}
						// 如果是静态资源路径，使用静态资源服务器地址
						else if (src && src.startsWith('/static/')) {
							img.setAttribute('src', (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + src);
						}
						// 如果是/images/开头，使用静态资源服务器地址
						else if (src && src.startsWith('/images/')) {
							img.setAttribute('src', (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + src);
						}
					});
				});
			},
			immediate: true,
			deep: true
		}
	},
	beforeDestroy() {
		this.stopTimer();
	},
	methods: {
		nextSlide() {
			this.currentIndex = (this.currentIndex + 1) % this.banners.length;
		},
		prevSlide() {
			this.currentIndex = (this.currentIndex - 1 + this.banners.length) % this.banners.length;
		},
		setCurrentIndex(index) {
			this.currentIndex = index;
		},
		startTimer() {
			this.timer = setInterval(() => {
				this.nextSlide();
			}, 4000);
		},
		stopTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		getImageUrl(imageUrl) {
			// 处理图片URL，确保使用正确的端口
			if (!imageUrl) return window.STATIC_BASE_URL + '/images/banner01.jpg';

			// 如果已经是完整URL，直接返回
			if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
				return imageUrl;
			}

			// 如果是FastDFS路径（/group1/开头），使用FastDFS服务器地址
			if (imageUrl.startsWith('/group1/')) {
				return (window.FDFS_BASE_URL || 'http://image.meiduo.site:8888') + imageUrl;
			}

			// 如果是静态资源路径（/static/开头），使用静态资源服务器地址
			if (imageUrl.startsWith('/static/')) {
				return (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + imageUrl;
			}

			// 如果是/images/开头，使用静态资源服务器地址
			if (imageUrl.startsWith('/images/')) {
				return (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + imageUrl;
			}

			// 其他相对路径，也使用静态资源服务器地址
			return (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + (imageUrl.startsWith('/') ? imageUrl : '/' + imageUrl);
		},
		handleImageError(event) {
			// 图片加载失败时使用默认图片
			console.warn('轮播图加载失败:', event.target.src);

			// 防止无限循环：如果已经是默认图片且加载失败，不再尝试加载
			if (event.target.src && event.target.src.includes('/images/banner01.jpg')) {
				console.error('默认轮播图也加载失败，停止尝试');
				return;
			}

			event.target.src = (window.STATIC_BASE_URL || 'http://127.0.0.1:8080') + '/images/banner01.jpg';
		}
	}
});